<template>
	<view class="home">
		<view class="card">
			<view class="load" v-if="!load">
				<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
			</view>
			<block v-else>
				<view class="navBox">
					
					<view class="searchCell">
						<image src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240800513109.png" class="searchimg">
						</image>
						<view class="scInp">
						<input type="text" v-model="searchContent" placeholder="| 请输入名称" 
							placeholder-class="placname" @blur="subblur"/>
						</view>
						<view class="scBtnBox">
						<view class="scSumBtn" @click="subSearch">搜索</view>
						</view>
					</view>
					
				</view>
				<block v-if="isSearch">
					<view class="shopbox" v-if="searchList.length">
						<view class="shoptitlebox">
							<view class="shop_title">搜索结果</view>
							
						</view>
						
						<view class="shoplistbox">
							<view class="shopcont" v-for="(item,index) in searchList" :key="index" @click="goDetail(item.ID)">
								<view class="shop_tag" :class="item.PromotionType=='预售'?'shop_tag_green':''" v-if="item.PromotionType">
									{{item.PromotionType}}
								</view>
								<image class="shopimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
								<view class="shopname">{{item.ProductName?item.ProductName:''}}</view>
								<view class="shop_pircebox">
									<view class="price_title"><text class="price_icon">￥</text>{{item.Price}}</view>
									<view class="soid">{{'已售'+item.VirtualSellNum}}</view>
								</view>
							</view>
						</view>
						<BtmLogo></BtmLogo>
					</view>
					<block v-else>
						<EmptyBox text="这里什么都没有..."></EmptyBox>
						<BtmLogo></BtmLogo>
					</block>
					<view class="loading_map" v-if="searchLoding">
					    <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1744876378486254.png"
					        mode="aspectFill"></image>
					    <view class="text">
					        正在搜索...
					    </view>
					</view>
				</block>
				
				
				<view class="shopbox" v-if="shopList.length && !searchList.length">
					<view class="shoptitlebox">
						<view class="shop_title">推荐商品</view>
						
					</view>
					
					<view class="shoplistbox">
						<view class="shopcont" v-for="(item,index) in shopList" :key="index" @click="goDetail(item.ID)">
							<view class="shop_tag" :class="item.PromotionType=='预售'?'shop_tag_green':''" v-if="item.PromotionType">
								{{item.PromotionType}}
							</view>
							<image class="shopimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
							<view class="shopname">{{item.ProductName?item.ProductName:''}}</view>
							<view class="shop_pircebox">
								<view class="price_title"><text class="price_icon">￥</text>{{item.Price}}</view>
								<view class="soid">{{'已售'+item.VirtualSellNum}}</view>
							</view>
						</view>
					</view>
					
					<BtmLogo></BtmLogo>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
	
				load: false, //是否加载
				

				PageIndex: 1, //页码
				PageSize:10,
				shopList: [], //商品列表
				isMore: true, //是否还有更多
				
				searchContent:"",//搜索的内容,
				
				
				isSearch:false,
				
				searchList:[],
				isSearchMore:true,
				searchLoding:false,
				mold:0
			};
		},
		computed: {
			...mapState(['Refresh']),
		},
		watch: {
			'searchContent':{
				handler(val){
					if(!val){
						this.isSearch = false
						console.log('>>>>>watch',val);
					}
				}
			}
		},

		async onLoad(e) {
			if (e.pid) {
				uni.setStorageSync("pid", e.pid);
			}
			this.mold = e.mold || 0
			this.init()
			
		},
		onShow() {
			if(this.mold==1){
				uni.setNavigationBarTitle({
					title:'搜索方案'
				})
			}
		},
		onReachBottom() {
			// if (this.isMore) {
			// 	this.PageIndex++;
			// 	this.getList();
			// }
			if (this.isSearchMore && this.isSearch) {
				this.PageIndex++;
				this.getSearchList();
			}
		},
		onUnload() {

		},

		methods: {
			async init(){
				await this.getList()
				this.load = true;
			},
			//搜索
			subSearch(){
				this.PageIndex = 1
				this.isSearch = true
				this.searchLoding = true
				this.getSearchList();
			},
			subblur(){
				this.PageIndex = 1
				this.isSearch = true
				this.searchLoding = true
				this.getSearchList();
			},
	
			// 点击跳转详情
			goDetail(id) {
				this.nav_to(`/pages/shop/detail?id=${id}`)
			},
			async getSearchList() {
				
				let res;
				if(this.mold==0){
					res = await this.$api.post('/Products/PageList', {
						PageIndex: this.PageIndex,
						PageSize: this.PageSize,
						ProductName:this.searchContent,
					});					
				}
				if(this.mold==1){
					res = await this.$api.post('/Module/ProductList', {
						PageIndex: this.PageIndex,
						PageSize: this.PageSize,
						ProductName: this.searchContent,
						ID:2020
					});
				}
				
				if (res.code == 0) {
					this.searchList = this.PageIndex == 1 ? this.searchList = res.data : this.searchList.concat(res.data)
					
				}
				setTimeout(()=>{
					this.searchLoding = false
				},500)
				this.isSearchMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
			},
			// 获取商品列表
			async getList() {
				let res = await this.$api.post('/Products/PageList', {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					// ProductName:this.searchContent,
				});
				if (res.code == 0) {
					this.shopList = this.PageIndex == 1 ? this.shopList = res.data : this.shopList.concat(res.data)
				
				}

				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
			}

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	view {
		box-sizing: border-box;
	}
	.navBox{
		
		width: 100%;
		box-sizing: border-box;
		height: 150rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.tabsBack {
			height: 44px;
			display: flex;
			align-items: center;
			// justify-content: center;
			// padding-left: 16rpx;
			.logoimg{
				width: 192rpx;
				height: 48rpx;
				margin-left: 24rpx;
			}
		}
		  .searchCell {
				width: 702rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 36rpx;
				margin: 0 auto;
				box-shadow:  0 0 4rpx #ccc;
				.scIcon {
				margin-right: 16rpx;
				}

				.searchimg {
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				}

				.scInp {
				flex: 1;
				margin-left: 5rpx;

				>input {
					width: 100%;
					background: transparent;
					margin-left: 16rpx;
				}

				.placname {
					color: #999999;
					font-size: 28rpx;
					// margin-left: 16rpx;
				}
				}

				.scBtnBox {
				display: flex;
				// margin-left: auto;
				margin-right: 8rpx;

				.scSumBtn {
					padding: 13rpx 34rpx;
					background: #e9d19b;
					border-radius: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #4C310C;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					&:last-child {
					margin-left: 20rpx;
					}
				}
				}
			}
			.barimg{
				width: 702rpx;
				height: 300rpx;
				display: block;
				margin: 20rpx auto;
				swiper-item{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					overflow: hidden;
					>image{
						width: 100%;
						height: 100%;
					}
				}
			
			}
	}
	.navlistbox{
		display: flex;
		align-items: center;
		// justify-content: space-around;
		flex-wrap: wrap;
		width: 702rpx;
		// height: 202rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 28rpx;
		padding-bottom: 0rpx;
		box-sizing: border-box;
		margin: 0 auto;
		.navcont{
			width: calc(100% / 5);
			text-align: center;
			margin-bottom: 16rpx;
			.navimg{
				width: 88rpx;
				height: 88rpx;
			}
			.navtitle{
				font-size: 24rpx;
				color: #666666;
				margin-top: 16rpx;
			}
		}
	}
	.heatbox{
		width: 702rpx;
		height: 402rpx;
		margin: 20rpx auto;
		background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
		background-size: cover;
		background-repeat: no-repeat;
		.heattextbox{
			display: flex;
			align-items: center;
			width: 100%;
			padding: 26rpx 22rpx;
			box-sizing: border-box;
			.heat_til{
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 8rpx;
			}
			.heat_img{
				width: 38rpx;
				height: 38rpx;
			}
			.heat_more{
				width: 128rpx;
				height: 44rpx;
				background: linear-gradient( 90deg, rgba(250,113,52,0.05) 0%, rgba(253,151,74,0.21) 100%);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #5d8bf8;
				margin-left: auto;
			}
		}
		.heat_shop_box{
			overflow-x: auto;
			width: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.heat_shop{
				width: 156rpx;
				margin-right: 16rpx;
				.heat_spimg{
					width: 156rpx;
					height: 156rpx;
					background-color: red;
					border-radius: 16rpx;
				}
				.heat_spname{
					width: 156rpx;
					font-size: 24rpx;
					display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
					-webkit-box-orient: vertical; /* 垂直排列 */
					-webkit-line-clamp: 2; /* 限制显示两行 */
					overflow: hidden; /* 隐藏超出范围的内容 */
					text-overflow: ellipsis; /* 使用省略号 */

				}
				.heat_price{
					font-size: 32rpx;
					font-weight: bold;
					color: #5d8bf8;
				}
				.pr_icon{
					font-size: 20rpx;
					font-weight: bold;
					color: #5d8bf8;
				}
			}
		}
	}
	/* 定义关键帧 */
	@keyframes spin {
	    from {
	        transform: rotate(0deg);
	        /* 从0度开始 */
	    }
	
	    to {
	        transform: rotate(360deg);
	        /* 旋转到360度，即一圈 */
	    }
	}
	.loading_map {
	    position: fixed;
	    top: 134rpx;
	    left: 0;
	    width: 100%;
	    height: 91vh;
			background-color: #f6f6f6;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	
	    image {
	        width: 80rpx;
	        height: 80rpx;
	        margin-bottom: 12rpx;
	        animation: spin 3s linear infinite;
	        /* 动画名称，持续时间，速度曲线，循环次数 */
	        transform-origin: center;
	        /* 确保旋转是围绕元素的中心进行 */
	    }
	
	    .text {
	        font-size: 28rpx;
	        color: #5d8bf8;
					margin-bottom: 400rpx;
	    }
	}
	.shopbox{
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-bottom: 100rpx;
		.shoptitlebox{
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			margin-left: 16rpx;
			.shop_title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.title_icon{
				width: 28rpx;
				height: 60rpx;
			}
		}
		.shoplistbox{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.shopcont{
				width: 342rpx;
				height: 546rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				position: relative;
				.shop_tag{
					position: absolute;
					top: 0;
					left: 0;
					padding: 8rpx 12rpx;
					background-color: #FF471A;
					color: #fff;
					font-size: 22rpx;
					border-radius: 16rpx 0 16rpx 0;
				}
				.shop_tag_green{
					background-color: #1ed68d;
				}
				.shopimg{
					width: 344rpx;
					height: 344rpx;
					// background-color: red;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
				}
				.shopname{
					width: 312rpx;
					height: 74rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 16rpx auto;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
				.shop_pircebox{
					width: 312rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price_title{
						font-size: 40rpx;
						font-weight: bold;
						color: #fc394b;
					}
					.price_icon{
						font-size: 28rpx;
						font-weight: bold;
						color: #fc394b;
					}
					.soid{
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
		.shoplistbox .shopcont:nth-child(2n){
			margin-right: 0rpx;
		}
	}
</style>